<template>
	<PopupTemplate className="confirm_order_container" title="确认下单" type="1" :closeable="true" :visible="visible"
		@update:visible="handleUpdate">
		<view class="mt_24">
			<u--form labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" ref="uForm">
				<u-form-item label="订单优惠金额" prop="salesDiscount" labelPosition="top" ref="item1">
					<view class="mt_8">
						<u--input placeholder="请输入订单优惠金额" v-model="formData.salesDiscount" border="none" type="digit"
							clearable @blur="handleBlur"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="实际支付金额" labelPosition="top" ref="item1">
					<view class="mt_8">
						<u--input placeholder="请输入实际支付金额" :value="actualAmount" border="none" type="digit"
							readonly></u--input>
					</view>
				</u-form-item>
				<template v-if="userType<4&&appType==base.USER_TYPE&&data.logisticsDelivery!=1&&!(!data.isSendTogether&&data.deliveryWay==1)">
					<u-form-item label="付款方式" prop="payType" labelPosition="top" ref="item1">
						<view class="mt_8">
							<u-radio-group v-model="formData.payType" placement="row">
								<u-radio activeColor="#F08519" :name="2" label="定金"></u-radio>
								<u-radio style="margin-left: 32rpx;" activeColor="#F08519" :name="1"
									label="全款"></u-radio>
							</u-radio-group>
						</view>
					</u-form-item>
					<u-form-item v-if="formData.payType==2" label="定金金额" prop="depositAmount" labelPosition="top"
						ref="item1">
						<view class="mt_8">
							<u--input placeholder="请输入定金金额" v-model="formData.depositAmount" border="none"
								type="digit"></u--input>
						</view>
					</u-form-item>
				</template>
			</u--form>
			<view class="mt_26">
				<button class="custom_btn primary w100 fz_14 br_27 lh_40" @click="handleConfirm">确认下单</button>
			</view>
		</view>
	</PopupTemplate>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import PopupTemplate from '@/components/PopupTemplate.vue'
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => ({})
			}
		},
		components: {
			PopupTemplate
		},
		data() {
			return {
				base: this.$base,
				formData: {
					salesDiscount: '',
					payType: 1,
					depositAmount: ''
				},
				actualAmount: 0,
				rules: {
					'salesDiscount': []
				},
			}
		},
		computed: {
			...mapState(['userType', 'appType'])
		},
		watch: {
			visible: {
				handler(newVal) {
					if (!newVal) {
						this.$set(this.formData, 'salesDiscount', '')
					} else {
						this.$set(this.rules, 'salesDiscount', [{
							type: 'number',
							required: true,
							message: '请输入订单优惠金额',
							trigger: ['blur', 'change']
						}, {
							message: '请输入范围内金额',
							trigger: ['blur', 'change'],
							validator: (rule, value, callback) => {
								return uni.$u.test.range(value, [0, this.data.payAmount]);
							}
						}])
						this.$nextTick(() => {
							this.$refs.uForm.setRules(this.rules)
							if (this.data.auditPass == false) {
								this.$set(this.formData, 'salesDiscount', this.data.salesDiscount ?? '')
								this.$refs.uForm.validateField('salesDiscount')
								// this.formData.salesDiscount = this.data.salesDiscount ?? '';
								this.actualAmount = this.data.payAmount - (this.formData.salesDiscount ? this
									.formData
									.salesDiscount : 0)
							} else {
								this.actualAmount = this.data.payAmount
							}
						})
					}
				}
			},
			'formData.payType': {
				handler(newVal) {
					if (newVal == 2) {
						this.$set(this.rules, 'depositAmount', [{
							type: 'number',
							required: true,
							message: '请输入定金金额',
							trigger: ['blur', 'change']
						}, {
							message: '请输入范围内金额',
							trigger: ['blur', 'change'],
							validator: (rule, value, callback) => {
								return uni.$u.test.range(value, [0, this.data.payAmount]);
							}
						}])
					} else {
						this.$set(this.rules, 'depositAmount', [])
						this.$set(this.formData, 'depositAmount', '')
					}
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules)
					})
				}
			}
		},
		methods: {
			handleUpdate(e) {
				this.$emit('update:visible', e)
			},
			handleBlur() {
				this.actualAmount = this.data.payAmount - this.formData.salesDiscount
			},
			handleConfirm() {
				this.$refs.uForm.validate().then(res => {
					console.log('成功')
					this.$emit('confirm', this.data, this.formData.payType == 1 ? {
						salesDiscount: this.formData.salesDiscount
					} : this.formData)
				}).catch(errors => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	input {
		padding: 12rpx !important;
		background-color: #F6F6F6;
		border-radius: 16rpx;
	}
</style>